<template>
  <van-form class="mt-4 mx-2" validate-first @submit="onSubmit" ref="form">
    <p class="text-xs text-gray-600 mx-4 my-2">
      为了您个人权益，姓名请真实填写，填写完成后不可修改
    </p>
    <van-field
      label="姓    名"
      name="realname"
      v-model="realname"
      placeholder="请输入姓名"
      :rules="[{ required: true, message: '请输入姓名' }]"
    />
    <van-field
      v-model="bank"
      name="bank"
      label="银行名称"
      placeholder="请输入银行名称"
      :rules="[{ required: true, message: '请输入银行名称' }]"
    />
    <van-field
      v-model="bankcard"
      type="tel"
      name="bankcard"
      label="银行卡号"
      placeholder="请输入银行卡号"
      :rules="[{ required: true, message: '请输入银行卡号' }]"
    />

    <div class="mt-6 mx-4">
      <van-button
        :loading="$loading"
        round
        block
        type="primary"
        native-type="submit"
        >提 交</van-button
      >
    </div>
  </van-form>
</template>

<script>
export default {
  data() {
    return {
      bank: '',
      bankcard: '',
      realname: '',
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
  },
  created() {
    this.bank = this.user.bank
    this.bankcard = this.user.bankcard
    this.realname = this.user.realname
  },
  methods: {
    onSubmit(values) {
      this.axios.post(`/m/bankcard/add_n`, values).then(res => {
        if (res.data.code === 1) {
          const bankcard = {
            number: values.bankcard,
            bank: values.bank,
          }
          this.$store.commit('setUserAttr', {
            key: 'bankcards',
            val: [...this.user.bankcards, bankcard],
          })

          this.$store.commit('setUserAttr', {
            key: 'realname',
            val: values.realname,
          })
          this.$toast.success('绑定成功')
          this.$emit('footer-show')
          this.$router.push('/my')
        } else {
          this.$toast.fail(res.data.msg)
        }
      })
    },
  },
}
</script>

<style>
</style>